<template>
    <div class="box">
        <div class="div" ref="div">
            <div class="top">
                <Top></Top>
            </div>
            <div class="bot">
                <div class="left">
                    <div class="ctop">
                        <Ctop></Ctop>
                    </div>
                    <div class="cbot">
                        <Cbot></Cbot>
                    </div>
                </div>
                <div class="cen">
                    <div class="map">
                        <Map></Map>
                    </div>
                    <div class="line">
                        <Line></Line>
                    </div>
                </div>
                <div class="right">
                    <div class="ctop">
                        <rightTop></rightTop>
                    </div>
                    <div class="ccen">
                        <rightCen></rightCen>
                    </div>
                    <div class="cfot">
                        <rightFot></rightFot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Ctop from './component/ctop.vue'
import Top from './component/top.vue'
import Cbot from './component/cbot.vue'
import Map from './component/map.vue'
import Line from './component/line.vue'
import rightTop from './component/rightTop.vue'
import rightCen from './component/rightCen.vue'
import rightFot from './component/rightFot.vue'
let div = ref()

function getDcale(w = 1920, h = 1080) {
    // 计算需要缩放的比例

    let ww = window.innerWidth / w
    let hh = window.innerHeight / h
    return { ww, hh }
}
onMounted(() => {
    let { ww, hh } = getDcale()
    div.value.style.transform = `scale(${ww},${hh}) translate(-50%,-50%)`
})
// jianting 视口变化
window.onresize = () => {
    let { ww, hh } = getDcale()
    div.value.style.transform = `scale(${ww},${hh}) translate(-50%,-50%)`

};
</script>
<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    background: url(../Adaptive/images/bg.png) no-repeat;
    background-size: 100% 100%;

    .div {
        width: 1920px;
        height: 1080px;
        position: fixed;
        transform-origin: top left;
        left: 50%;
        top: 50%;
        // transform: scale(0.5,0.6) translate(-50%,-50%);
        color: white;

        .top {
            width: 100%;
            height: 100px;
        }

        .bot {
            height: calc(100% - 100px);
            display: flex;
            justify-content: space-around;

            .left {
                width: 20%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                // background: red;
                .ctop {
                    height: 45%;
                }

                .cbot {
                    height: 53%;
                }
            }

            .cen {
                width: 58%;
                // background: blue;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .map {
                    height: 65%;
                }

                .line {
                    height: 33%;

                }

            }

            .right {
                width: 20%;
                // background: blue;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                div {}

                .ctop {
                    height: 31%;
                }

                .ccen {
                    height: 33%;

                }

                .cfot {
                    height: 33%;

                }
            }
        }
    }
}

.container {
    width: 500px;
    height: 200px;
}

li {
    text-shadow: 0 0 5px white;
}</style>